<template>
  <div style="height: 100%">
    <div class="fixHeader">
      <Header class="main-top header-con">
        <div>
          <!-- <img style="width: 91px; height: 29px" :src="index_logo" alt="" /> -->
          <p class="pageTitle" @click="$refs.sider.toggleCollapse()">
            交通信息发布系统
          </p>
        </div>
        <div>
          <error-store
            v-if="
              $config.plugin['error-store'] &&
              $config.plugin['error-store'].showInHeader
            "
            :has-read="hasReadErrorPage"
            :count="errorCount"
          ></error-store>
          <!-- <fullscreen v-model="isFullscreen" style="margin-right: 10px" /> -->
          <qr-code
            :message-unread-count="unreadCount"
            :user-avatar="userAvatar"
          />
          <!-- <p
            class="header-help letter cup"
            @click="toPage('envelope')"
            v-if="
              hasOneOf(
                ['platform_message_center_notice'],
                $store.state.user.access
              )
            "
          >
            <Badge :count="Information" class-name="demo-badge-alone">
              <i
                class="iconfont icon-zhanneixin tb-400"
                style="font-size: 24px; color: #fff"
              ></i>
            </Badge>
          </p> -->
          <user
            @on-close="handleCloseTag"
            :message-unread-count="unreadCount"
            :user-avatar="userAvatar"
          />
        </div>
      </Header>
    </div>
    <div style="height: 70px"></div>
    <Layout class="main" style="height: calc(100vh - 70px)">
      <Sider
        hide-trigger
        collapsible
        :width="210"
        ref="sider"
        :collapsed-width="78"
        v-model="collapsed"
        class="left-sider"
        v-if="showSider"
      >
        <!-- 存在activeName则用activeName，没有activeName则用name -->
        <side-menu
          accordion
          ref="sideMenu"
          :active-name="
            $route.meta.activeName ? $route.meta.activeName : $route.name
          "
          :collapsed="collapsed"
          @on-select="turnToPage"
          :menu-list="menuList"
        >
        </side-menu>
      </Sider>
      <Layout>
        <!-- 导航内容区 -->
        <Content class="main-content-con">
          <Layout class="main-layout-con">
            <div class="tag-nav-wrapper">
              <tags-nav
                :value="$route"
                @input="handleClick"
                :list="tagNavList"
                @on-close="handleCloseTag"
              />
            </div>
            <div
              class="extra"
              v-if="
                $route.meta.title == '应用权限配置管理' &&
                $route.path != '/home'
              "
            >
              <h3 class="titler">
                <div class="box" @click="$router.go(-1)">
                  <Icon
                    type="md-arrow-back"
                    size="16"
                    style="margin-right: 10px; margin-bottom: 5px"
                  />
                  <span>返回应用列表</span>
                  <Divider type="vertical" />
                  <span>应用权限管理</span>
                </div>
              </h3>
            </div>
            <div class="extra" v-if="$route.name == 'authority-manager'">
              <h3 class="titler">
                <div class="box" @click="$router.go(-1)">
                  <Icon
                    type="md-arrow-back"
                    size="16"
                    style="margin-right: 10px; margin-bottom: 5px"
                  />
                  <span>返回产品管理列表</span>
                  <Divider type="vertical" />
                  <span>产品权限管理</span>
                </div>
              </h3>
            </div>

            <Content
              class="content-wrapper"
              :class="
                noSpace
                  ? 'content-wrapper-padding-no'
                  : 'content-wrapper-padding'
              "
            >
              <div
                class="metaTitle pl-20"
                v-if="!blackList.includes($route.name)"
              >
                {{ $route.meta.title }}
              </div>
              <transition name="fade-transform" mode="out-in">
                <keep-alive :include="cacheList">
                  <router-view />
                </keep-alive>
              </transition>
              <ABackTop
                :height="100"
                :bottom="80"
                :right="50"
                container=".content-wrapper"
              ></ABackTop>
            </Content>
          </Layout>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>
import { hasOneOf } from "@/libs/tools";
import index_logo from "@/assets/images/logo.png";
import SideMenu from "./components/side-menu";
import HeaderBar from "./components/header-bar";
import TagsNav from "./components/tags-nav";
import User from "./components/user";
import QrCode from "./components/qrCode";
import ABackTop from "./components/a-back-top";
import Fullscreen from "./components/fullscreen";
import Language from "./components/language";
import ErrorStore from "./components/error-store";
import CostCenter from "./components/costCenter/index";
import { mapMutations, mapActions, mapGetters } from "vuex";
import { getNewTagList, routeEqual } from "@/libs/util";
import routers from "@/router/routers";
import "./main.less";
export default {
  name: "Main",
  components: {
    SideMenu,
    HeaderBar,
    Language,
    TagsNav,
    Fullscreen,
    ErrorStore,
    User,
    ABackTop,
    QrCode,
    CostCenter,
  },
  data() {
    return {
      index_logo,
      hasOneOf,
      collapsed: false,
      costCenter: false,
      isFullscreen: false,
      showSider: true,
      blackList: ["_home-page"],
    };
  },

  computed: {
    ...mapGetters(["errorCount"]),
    noSpace() {
      return this.$route.meta.noSpace;
    },
    tagNavList() {
      return this.$store.state.app.tagNavList;
    },
    tagRouter() {
      return this.$store.state.app.tagRouter;
    },
    userAvatar() {
      return this.$store.state.user.avatarImgPath;
    },
    Information() {
      return this.$store.state.user.Information;
    },
    cacheList() {
      const list = [
        "ParentView",
        ...(this.tagNavList.length
          ? this.tagNavList
              .filter((item) => !(item.meta && item.meta.notCache))
              .map((item) => item.name)
          : []),
      ];
      return list;
    },
    menuList() {
      return this.$store.getters.menuList;
    },
    local() {
      return this.$store.state.app.local;
    },
    hasReadErrorPage() {
      return this.$store.state.app.hasReadErrorPage;
    },
    unreadCount() {
      return this.$store.state.user.unreadCount;
    },
  },

  watch: {
    $route(newRoute) {
      const { name, query, params, meta } = newRoute;
      this.showSider = this.showLeftSider();
      this.addTag({
        route: { name, query, params, meta },
        type: "push",
      });
      this.setBreadCrumb(newRoute);
      this.setTagNavList(getNewTagList(this.tagNavList, newRoute));
    },
  },
  mounted() {
    /**
     * @description 初始化设置面包屑导航和标签导航
     */
    this.setTagNavList();
    this.setHomeRoute(routers);
    // const { name, params, query, meta } = this.$route;
    // this.addTag({
    //   route: { name, params, query, meta },
    // });
    // this.setBreadCrumb(this.$route);
    // // 默认push首页tag
    // if (!this.tagNavList.find((item) => item.name === this.$route.name)) {
    //   this.$router.push({
    //     name: this.$config.homeName,
    //   });
    // }
    // 设置默认tag
    this.setDefaultTag();
    this.showSider = this.showLeftSider();
  },

  methods: {
    ...mapMutations([
      "setBreadCrumb",
      "setTagNavList",
      "addTag",
      "setLocal",
      "setHomeRoute",
      "closeTag",
    ]),

    ...mapActions(["getUnreadMessageCount"]),
    // 设置默认tag
    setDefaultTag() {
      const { name, params, query, meta } = this.$route;
      this.setBreadCrumb(this.$route);
      // 默认push首页tag
      if (
        !this.tagNavList.some((item) => item.name === this.$config.homeName)
      ) {
        this.addTag({
          route: {
            name: "_home-page",
            query: {},
            params: {},
            meta: {
              notCache: true,
              icon: "icon-kongzhitaizonglan",
              title: "首页",
              access: ["booking_home-page"],
            },
          },
        });
      }
      if (
        this.tagNavList.some((item) => item.name === this.$config.homeName) &&
        !this.tagNavList.some((item) => item.name === name)
      ) {
        this.addTag({
          route: { name, params, query, meta },
        });
      }
    },
    async turnToPage(route) {
      let { name, params, query } = {};
      if (typeof route === "string") name = route;
      else {
        name = route.name;
        params = route.params;
        query = route.query;
      }
      if (name.indexOf("isTurnByHref_") > -1) {
        window.open(name.split("_")[1]);
        return;
      }

      this.$router.push({
        name,
        params,
        query,
      });
    },

    handleCollapsedChange(state) {
      this.collapsed = state;
    },
    handleClick(item) {
      this.turnToPage(item);
    },
    handleCloseTag(res, type, route) {
      if (type !== "others") {
        if (type === "all") {
          this.turnToPage(this.$config.homeName);
        } else {
          if (routeEqual(this.$route, route)) {
            this.closeTag(route);
          }
        }
      }
      this.setTagNavList(res);
    },

    toPage(name) {
      switch (name) {
        case "cost-center2":
          this.collapsed = this.costCenter = true;
          break;
        case "envelope":
          this.costCenter = this.collapsed = false;
          break;

        default:
          break;
      }
      this.$router.push({ name });
    },

    SwitchCost() {
      this.collapsed = this.costCenter = !this.costCenter;
      this.$router.push({ name: "cost-center2" });
    },

    showLeftSider() {
      const { name } = this.$route;
      return !["order-confirm", "product-buy", "pay-order-success"].includes(
        name
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.extra {
  padding: 18px 0 0 18px;
  .titler {
    display: flex;
    align-items: center;
    .box {
      cursor: pointer;
      font-size: 16px;
    }
  }
}
/deep/.demo-badge-alone {
  background: #ff0000;
  padding: 0 4px;
  box-shadow: none;
}
// .main .logo-con img {
//   height: 20px;
//   display: block;
// }
.header-help {
  color: rgb(161, 168, 172);
  font-size: 14px;
  margin-right: 30px;
}
.letter {
  width: 24px;
  height: 64px;
  text-align: center;
  line-height: 64px;
  display: block;
  &:hover {
    // background-color: #344258;
  }
}

.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.2s;
}

.fade-transform-enter {
  opacity: 0;

  transform: translateY(-5px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(5px);
}
.demo-badge {
  width: 42px;
  height: 42px;
  display: inline-block;
}
/deep/.ivu-badge-count {
  top: 8px;
  right: -6px;
}
/deep/.ivu-menu-item > i {
  margin-right: 8px !important;
}
.ivu-divider {
  background: black !important;
}
</style>
